<template>
	<div class="sugar">
		<x-head></x-head>
		<div class="list">
			<group>
				<cell title="测量条件" :value="menuItem" is-link @click.native='showMenuAction'></cell>
				<x-input type="number" v-model="sugarData.GLU" title="血糖(mmol):" placeholder="必填" text-align="right" :required="true"></x-input>
				<datetime title="选择时间" :value="testTime" placeholder="必选" @on-change="datetimeAction" :required="true" format="YYYY-MM-DD" start-date="1900-01-01" :end-date= 'currentDate'></datetime>
			</group>
		</div>
		<actionsheet v-model="showMenu" :menus="menus" @on-click-menu='clickmeunu'>
		</actionsheet>
		<x-button id="btnbox" class='btn' @click.native="keep">保存</x-button>

		<!-- 初始化弹窗  -->
		<x-dialog v-model="showToast">
			<div class="wrapp">
				<div class="top">测量注意事项</div>
				<div class="inner">
					<p>做好血糖监测日记包括：</p>
					<p style="text-indent: 2em;">血糖测定时间，血糖值，进餐时间及进餐量，运动时间及运动量，用药及时间以及一些特殊事件的记录。</p>
				</div>
				<x-button type="primary" style='background: rgb(58,175,252);width: 50%;border-radius:99px;' @click.native="agreeAction">同意</x-button>
			</div>
		</x-dialog>
	</div>
</template>

<script>
	import Api from '@/api/index.js'
	import xHead from '@/components/common/Head.vue'
	export default {
		components: {
			xHead
		},
		data() {
			return {
				currentDate: '',
				testTime:'',
				sugarData:{
					GLU: '',
					GLUCategory: '',
					testTime: '',
					customer_id: ''
				},
				menuItem: '',
				showToast: true,
				showMenu: false,
				menus: {
					1: '空腹测试',
					2: '餐后2小时',
					3: '随机血糖'
				}
			}
		},
		created(){
			this.sugarData.customer_id = localStorage.getItem('customer_id');
		},
		mounted(){
			//  解决 手机键盘弹出bug
			var original = document.documentElement.clientHeight;
			window.addEventListener("resize", function() {
				var resizeHeight = document.documentElement.clientHeight;
				if(resizeHeight != original) {
					document.getElementById('btnbox').style.display = 'none'
				} else {
					document.getElementById('btnbox').style.display = 'block'
				}
			});
			this.dateFun()
		},
		methods: {
			//  获取当前日期
			dateFun(){
				var timestamp = (new Date()).getTime();
				var date = new Date(timestamp);
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				let D = date.getDate();		D = D < 10 ? '0' + date.getDate() : D
				var currentDate = Y + M + D;
				this.currentDate = currentDate;
			},
			//  弹窗 同意
			agreeAction() {
				this.showToast = false;
			},
			//  显示菜单
			showMenuAction() {
				this.showMenu = true;
			},
			// 选择菜单
			clickmeunu(menuKey, menuItem) {
				this.menuItem = menuItem
				this.sugarData.GLUCategory = menuKey;
			},
			// 选择时间
			datetimeAction(date) {
				this.sugarData.testTime = Date.parse(new Date(date))
			},
			// 保存
			keep(){
				if(this.sugarData.GLU !== '' && this.sugarData.GLUCategory !== '' && this.sugarData.testTime !== '') {
					console.log(this.sugarData)
					let param = new URLSearchParams()
					param.append('customer_id', this.sugarData.customer_id)
					param.append('GLU', this.sugarData.GLU)
					param.append('GLUCategory', this.sugarData.GLUCategory)
					param.append('testTime', this.sugarData.testTime)
					this.$http({
						method: 'post',
						url: Api.GLUmonitorAddApi,
						data: param
					})
					.then((res)=>{
						console.log(res)
						this.$router.push({
							path: '/datamonitor'
						})
					})
					.catch((err)=>{
						console.log(err)
					})
				} else {
					this.$vux.toast.show({
						text: '资料未填写完整',
						type: 'cancel'
					})
				}
			}
		}
	}
</script>

<style lang='less' scoped>
	.sugar {
		position: fixed !important;
		left: 0;
		top: 0;
		right: 0;
		z-index: 999;
		width: 100%;
		height: 100%;
		overflow: auto;
		background: #fff;
		.wrapp {
			padding-bottom: 14px;
			.top {
				color: #fff;
				background: rgb(58, 175, 252);
				padding: 20px;
				font-size: 18px;
			}
			.inner {
				padding: 20px;
				text-align: left;
				p {
					margin-bottom: 4px;
					font-size: 15px;
				}
			}
		}
	}
	
	.btn {
		position: absolute !important;
		left: 0 !important;
		bottom: 0 !important;
		background: rgb(58, 175, 252);
		color: #fff;
	}
</style>